html, body {
  width: 100%;
  height: 100%;
}

.contain {
  width: 1360px;
  margin: 0 auto;
}

li, ol, li {
  list-style: none;
}

body {
  display: flex;
  flex-direction: column;
}

.top {
  height: 60px;
  position: relative;
}

.top .left {
  float: left;
  display: flex;
  align-items: center;
  position: absolute;
  left: -40px;
  cursor: pointer;
}

.top .left li {
  margin: 5px;
}

.top .right {
  float: right;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 60px;
}

.top .right li {
  margin: 5px;
}

.top .right > .tupian {
  width: 24px;
  height: 22px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -110px;
  background-position-y: -50px;
}

.center {
  flex: 1;
  position: relative;
  width: 100%;
}

.center .shang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: pink;
}

.center .shang .left {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.center .shang .left li {
  font-size: 16px;
  padding: 10px;
  text-align: center;
}

.center .shang .left li img {
  height: 30px;
}

.center .shang .right {
  float: right;
  cursor: pointer;
}

.center .shang .right .xia input {
  display: block;
  width: 360px;
  height: 30px;
  text-align: center;
  border-right: none;
  border: 1px solid #333;
  box-sizing: border-box;
  border-radius: 30px 0 0 30px;
}

.center .shang .right .xia span {
  display: block;
  width: 420px;
  border: 1px solid #333;
  border-radius: 30px;
}

.center .shang .right .xia span i {
  width: 25px;
  height: 25px;
  float: right;
  margin-right: 26px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -172px;
  background-position-y: -46px;
}

.center .shang .right ul {
  display: flex;
  margin: 5px 10px 0 0;
}

.center .shang .right ul li {
  margin: 0 5px;
}

.center .bgc {
  display: flex;
  width: 100%;
  position: relative;
}

.center .bgc img {
  display: block;
  width: 100%;
}

.center .bgc span {
  width: 50px;
  height: 50px;
  display: block;
  font-size: 60px;
  background-color: rgba(51, 51, 51, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center .bgc .left {
  position: absolute;
  left: 130px;
  top: 105px;
}

.center .bgc .right {
  position: absolute;
  right: 10px;
  top: 105px;
}

.center .caidan {
  display: flex;
  position: absolute;
  top: 6.5%;
}

.center .caidan ul {
  width: 100px;
  display: flex;
  flex-direction: column;
  background-color: rgba(51, 51, 51, 0.7);
  padding: 10px 10px;
  padding-bottom: 20px;
}

.center .caidan ul li {
  color: #fff;
  padding: 6.5px;
}

.center .caidan ol {
  flex: 1;
  background-color: skyblue;
  display: none;
}

.center .caidan ol li {
  justify-content: center;
  align-items: center;
}

.center .caidan ol li img {
  width: 60px;
  vertical-align: middle;
}

.center .active {
  display: flex;
  flex-direction: column;
}

.center .active span {
  display: block;
  width: 100%;
}

.center .active .pic {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
}

.center .active .pic li img {
  width: 300px;
  height: 200px;
}

.footer {
  background-color: pink;
}
